<template>
  <header>
    <div class="l-content">
      <el-page-header @back="goBack"> </el-page-header>
      <el-button icon="el-icon-s-fold" size="mini" @click="collapsePersionMenu">
      </el-button>
    </div>
    <!-- ----------- -->
    <div class="r-content">
      <span class="userName">{{ userName }}</span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-avatar :src="userImg"></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled> 个人中心 </el-dropdown-item>
          <el-dropdown-item>
            <el-link href="http://lyxalyh.top:2020/wp-admin/index.php" target="_blank">
              博客后台管理
            </el-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-link href="http://120.76.245.48:8888/e01720cb" target="_blank">
              控制面板
            </el-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-link @click="loginOut">
              <i class="el-icon-switch-button"></i>安全退出
            </el-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      userImg: require("../assets/image/logo.png"),
      userName: localStorage.getItem("token"),
    };
  },
  methods: {
    collapsePersionMenu() {
      this.$store.commit("collapsePersionMenu");
    },
    loginOut() {
      localStorage.clear();
      this.$router.push("/");
    },
    goBack() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  .r-content {
    cursor: pointer;
    display: flex;
    align-items: center;
    .userName {
      cursor: no-drop;
      margin: 0 15px;
    }
  }
  .l-content {
    display: flex;
    align-items: center;
    .el-button {
      margin-right: 20px;
    }
  }
}
</style>
<style lang="scss">
.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: #7e7a7a;
  }
  &:last-child {
    .el-breadcrumb__inner {
      color: black;
    }
  }
}
</style>
